<template id="ManyBars">
	<div :id="id" :style="chartStyle">
    <slot></slot>
  </div>
</template>

<script>
    import defaultImange from "../img/bgBlue.png";
/**
 *@author 张馨月
 */
    export default {
      name: 'ATManyBars',
      data () {
        return {
          myChart:null,
        }
      },
      mounted(){
        this.$nextTick(function(){
          this.draw();
        })
      },
      watch:{
        seriesData(){
          this.draw()
        },
        legendData(){
          this.draw()
        },
      },
      props:{
        id:{
          type: String,
          default: function () { 
            let temp = [];
            for (let i = 0; i < 6; i++) {
              let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
              temp.push(randomChar);

            }
            return temp.reduce((pre, next) => pre + next);
          }
        },
        xData:{
          type:Array,
          // require:true,
          default:[]
        },
        seriesData:{
          type:Array,
          // require:true,
          default:function(){
            return []
          }
        },
        legendData:{
          type:Array,
          // require:true,
          default:function(){
            return []
          }
        },
        fileName: {
          type:String,
          default:"echarts"
        },
        leftspace:{
          type:String,
          // require:true,
          default:'4%'
        },
        rightspace:{
          type:String,
          // require:true,
          default:'6%'
        },
        bottomspace:{
          type:String,
          // require:true,
          default:'3%'
        },
        chartStyle:{
          type:String,
          // required:true,
          default:"width:100%;height:100%;"
        },
        toolboxRight:{
          type:String,
          default:'120px'
        },
        toolboxTop:{
          type:String,
          default:'5px'
        },
        // toolboxLeft:{
        //   type:String,
        //   default:'0px'
        // },
        legendRight:{
          type:String,
          default:'0%'
        },
        legendLeft:{
          type:String,
          default:'0%'
        },
        legendTop:{
          type:String,
          default:'8px'
        },
        itemColor:{
          type:Array,
          default:function(){
            return ['#91e3ee','#6be1c1','#64d4cd','#5f9dff','#7d92d4']
          }
        },
        showDownloadIcon:{
          type:Boolean,
          default:true
        },
        formatter:{
            default:'<p style="color:#fff;margin-top:11px;margin-left:5px;margin-right:15px;">{b0}</p><p style="height:15px;"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" fill="#91e3ee"stroke-width="2" /></svg>{a0}：{c0}</p><p style="height:15px;"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" fill="#6be1c1"stroke-width="2" /></svg>{a1}：{c1}</p><p style="height:15px;"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" fill="#64d4cd"stroke-width="2" /></svg>{a2}：{c2}</p><p style="height:15px;"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" fill="#5f9dff"stroke-width="2" /></svg>{a3}：{c3}</p><p style="height:15px;"><svg width="20px" height="20px" version="1.1"><circle cx="10" cy="15" r="4" fill="#7d92d4"stroke-width="2" /></svg>{a4}：{c4}</p>'
        },  
        tooltippadding:{
          default:function(){
            return [8,20 ,17 ,15]
          }
        }
      },
      methods: {
        draw(){
            // let myChart = this.$echarts.init(document.getElementById(this.id))
            // 绘制图表
            if (document.getElementById(this.id)) {
              this.myChart = this.myChart==null ? this.$echarts.init(document.getElementById(this.id)):this.myChart
              this.myChart.setOption({
                    color:this.itemColor,
                    tooltip: {
                        padding:this.tooltippadding,
                        formatter:this.formatter,
                        trigger: 'axis',
                        axisPointer : {
                            type : 'shadow'
                        },
                        backgroundColor:'rgba(50, 50, 50, 0.7)',
                        borderColor:'rgb(51, 51, 51)',
                        borderWidth:0,
                        textStyle:{
                            color:"#fff",
                            fontSize:12,
                            fontFamily: '宋体'
                        },
                    },
                    toolbox:{
                        right:this.toolboxRight,
                        top:this.toolboxTop,
                        // left:this.toolboxLeft,
                        show: this.showDownloadIcon,
                        iconStyle: {
                          normal:{
                            borderColor: '#5c6781'
                          },
                          emphasis:{
                            borderColor: '#4990ff'
                          }
                        },
                        orient: 'horizontal',
                        itemGap: 10,
                        itemSize:84,
                        showTitle: true,
                        feature: {
                          saveAsImage:{
                              show:true,
                              name: this.fileName,
                              title: ' ',
                              icon: 'image://'+defaultImange,
                          }    
                        }                      
                    },
                    legend: {
                        data:this.legendData,
                        right:this.legendRight,
                        top:this.legendTop,
                        left:this.legendLeft,
                        icon : 'square',
                        itemWidth:12,
                        itemHeight:12,
                        textStyle: {
                          fontFamily: '宋体'
                        }
                    },
                    grid: {
                        left: this.leftspace,
                        right: this.rightspace,
                        bottom: this.bottomspace,
                        containLabel: true
                    },
                    xAxis : [
                        {
                          type : 'category',
                          data : this.xData,
                          axisLine:{
                              lineStyle:{
                                  color:'#e0e0e8',
                                  width:1,
                              }
                          },
                          axisLabel: {
                              show: true,
                              textStyle: {
                                  color: '#758697',
                                  fontFamily: '宋体'
                              }
                          }
                        }
                    ],
                    yAxis : [
                        {
                          type : 'value',
                          splitLine: {
                              lineStyle:{
                                  color:'#f5f7fb',
                                  width:1,
                              }
                          },
                          axisLine:{
                              lineStyle:{
                                  color:'#fff',
                                  width:1,
                              }
                          },
                          axisLabel: {
                              show: true,
                              textStyle: {
                                  color: '#758697',
                                  fontFamily: '宋体'
                              }
                          }
                        }
                    ],
                    series : this.seriesData
              });
              var _this=this
              window.addEventListener("resize",function(){
                  _this.myChart.resize();
              })
            }
        },
      }
    }
</script>

